<template>
    <pre style="padding-left: 0">   
        <code class="language-Markup  line-numbers">
          地址：https://cn.vuejs.org/guide/components/events.html
          <strong>组件交互：子组件调用父组件</strong>
          1、关键字 defineEmits
          2、必须在直接放置在 &lt;script setup&gt; 的顶级作用域下
          3、如果需要修改props，需要先接收后在做修改
          
          在setup 中使用 defineProps 关键字定义
          常规定义
          1、const emits = defineEmits(['inFocus', 'submit'])

             function buttonClick() {
              emit('submit')
            }

          ts方式定义
          2、 const emit = defineEmits&lt;{
            (e: 'change', id: number): void
            (e: 'update', value: string): void
            }&gt;()
  

          事件校验
          3、const emit = defineEmits({
            // 没有校验
            click: null,

            // 校验 submit 事件
            submit: ({ email, password }) => {
                if (email && password) {
                return true
                } else {
                console.warn('Invalid submit event payload!')
                return false
                }
            }
            })

            function submitForm(email, password) {
            emit('submit', { email, password })
            }    
        </code>
      </pre>
  </template>
  <script setup lang="ts">
  import { onMounted } from "vue";
  import Prism from "prismjs";
  onMounted(() => {
    Prism.highlightAll();
  });
  </script>
  